import React, {
    Component
} from 'react'
import {
    StyleSheet,
    View,
    ListView,
    Image,
    Text,
    TouchableOpacity,
    ScrollView,
    Platform
} from 'react-native'
import { MtScreen } from 'martian-ui'
const WINDOW_WIDTH = MtScreen.width
const WINDOW_HEIGHT = MtScreen.height
import LabelBarWithSwitch from '../../components/styleCompoent/LabelBarWithSwitch'
import NavigationBar from '../../components/common/NavigationBar'
import { Icon } from '../../components/common/icon'
import {fetchDeviceDetailById, controlDevice } from '../../action/girlAction';
import { bindActionCreators } from 'redux';
import {connect} from 'react-redux';
const EntityLabels = require('../../constants/entities');
import assign from 'lodash/assign';
class SoundsAndLightAlarm extends Component {
  constructor(props) {
    super(props)

    this.renderList = this.renderList.bind(this)
    this.handlePress = this.handlePress.bind(this)
    // 初始状态
    this.state = {
      value1: false,
      data: [{
        key: 1,
        name: '系统撤防提示',
        icon: 'changjing_bisai_icon'
      },{
        key: 2,
        name: '系统布防提示',
        icon: 'changjing_bisai_icon'
      },{
        key: 3,
        name: '防盗报警',
        icon: 'changjing_bisai_icon'
      },{
        key: 4,
        name: '火警',
        icon: 'changjing_bisai_icon'
      },{
        key: 5,
        name: '紧急情况报警',
        icon: 'changjing_bisai_icon'
      },{
        key: 6,
        name: '110报警',
        icon: 'changjing_bisai_icon'
      }],
      currentModel: ''
    }


  }
  componentWillMount() {
    const { fetchDeviceDetailById,  deviceId} = this.props;
    fetchDeviceDetailById(deviceId);
    this.convertPropsToStates(this.props);

  }
  convertPropsToStates(props) {
    const {devicesEntities, deviceId} = props;
    const device = devicesEntities[deviceId];
    if(device && device.status){

      if(device.status.sirenWarningMode === '0'){
        this.setState({
          value1: false,
          currentModel: 9,
        })
      }else {
        this.setState({
          currentModel: parseInt(device.status.sirenWarningMode, 10),
          value1: true,
        })}
    }



    const newState = assign({
      device
    });

    if (newState) {
      this.setState(newState);
    }
  }

  componentWillReceiveProps(nextProps) {
    this.convertPropsToStates((nextProps));
  }

  controlAir(params){
    const {controlDevice, deviceId} = this.props;
    controlDevice(params, deviceId);
  }

  render() {
    const {value1} = this.state;
    return(
      <View style = {styles.container}>
        <NavigationBar
          title={'声光报警器'}
          statusBar={{backgroundColor: '#F4F4F4', barStyle: 'dark-content'}}
          style={{backgroundColor: '#F4F4F4'}}
          navigator={this.props.navigator}
        />
        <LabelBarWithSwitch
            barWidth={WINDOW_WIDTH-30}
            barHeight={68}
            containerStyle={{marginTop: 15}}
            title="报警开关"
            changeValue={(value)=> {
              if (!value) {
                const newAirParams = {'SirenWarningMode': '0'}
                this.controlAir(newAirParams);
              }

              this.setState({value1: value})
            }}
            value={value1}
        />
        <View style={styles.content}>
          <Text style={styles.title}>选择报警模式</Text>
          <ScrollView
            contentContainerStyle={styles.contentContainer}
            showsHorizontalScrollIndicator={false}
            showsVerticalScrollIndicator={false}
            style={{flex: 1}}>
            {this.renderList(this.state.data)}
          </ScrollView>
        </View>
      </View>
    )
  }

  renderList(list) {
    const { currentModel } = this.state
    if(list && list.length){
      return list.map((item) => {
        return (
          <TouchableOpacity onPress={() => {this.handlePress(item)}}>
            <View style={[styles.itemView, currentModel === item.key && styles.itemViewActive]}>
              <Icon name={item.icon} size={32} color={currentModel === item.key ? '#ffffff' : '#ABDADB'} />
              <Text style={[styles.itemText, currentModel === item.key && styles.itemTextActive]}>{item.name}</Text>
            </View>
          </TouchableOpacity>
        )
      })
    }
  }
  handlePress(item) {
    const newAirParams = {'SirenWarningMode': `${item.key}`}
    this.controlAir(newAirParams);
    this.setState({
      currentModel: item.key
    })
  }
}

function mapDispatchToProps(dispatch) {
  const actions = {
    fetchDeviceDetailById,
    controlDevice
  };
  return bindActionCreators(actions, dispatch);
}

function mappingStateToProps(state, ownProps) {
  const entities= state['entities'];
  const devicesEntities = entities[EntityLabels.devices];
  return {
    devicesEntities,
  }
}

module.exports = connect(mappingStateToProps, mapDispatchToProps)(SoundsAndLightAlarm);

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#f4f4f4',
    flex: 1,
  },
  content: {
    flex: 1,
    marginTop: 20,
  },
  title: {
    color: '#333333',
    fontSize: 14,
    marginTop: 15,
    marginLeft: 20,
    marginBottom: 10,
    fontWeight: 'bold',
  },
  contentContainer: {
    marginLeft: 15,
    marginRight: 15,
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  },
  itemView: {
    width: (WINDOW_WIDTH - 52)/3,
    height: 84,
    backgroundColor: '#D8EBEC',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 6,
  },
  itemViewActive: {
    backgroundColor: '#00A5AD'
  },
  itemText: {
    fontSize: 12,
    color: '#8E9E9F',
    marginTop: 10
  },
  itemTextActive: {
    color: '#ffffff'
  }
})
